<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<title>报名系统</title>
<link type="text/css" href="css/css.css" rel="stylesheet" />
<script type='text/javascript' src="dwr/engine.js"></script>
<script type='text/javascript' src="dwr/util.js"></script>
<script type='text/javascript' src="dwr/interface/DataHelper.js"></script>
<script type="text/javascript" src="js/jquery1.7.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" >
	var DemoDom;
	$(document).ready(function(){
		initMember();
		DemoDom = $("#memDemo");
		$("#nowTime").text(formatDate(new Date(), 2));
		window.setInterval(function(){
			$("#nowTime").text(formatDate(new Date(), 2));
		}, 1000);
	});
	initMember = function(){
		DataHelper.getMember(function(result){
	        if (!result.isTrue) {
	            alert(result.message)
	        }
	        else {
				$("#act_list_div").empty();
				for(var key in result.tag){
					var html = "";
					var act_info = result.tag[key];
					html += "<div class=\"block\"><div class=\"actTitle\"><strong style=\"font-size:20px\">"+act_info.name+"</strong>"
					+"<span style=\"margin-left:50px\">活动开始时间：<strong>"+convertTime(act_info.startTime)+"</strong></span>"
					+"<span style=\"margin-left:20px\">报名截止时间：<strong style=\"color:red\">"+convertTime(act_info.endTime)+"</strong></span>"
					+"<span style=\"margin-left:20px\">报名倒计时：<strong id=\""+key+"_rest\"></strong></span>"
					+"</div><pre>"+act_info.content+"</pre>";
					
					html += "<div class=\"clear20\"></div><ul id=\""+key+"_member\" class=\"memberUl\">";
					for(var i=0; i<act_info.memberInfo.length; i++){
						var obj = act_info.memberInfo[i];
						var opHTML = "";
						if(obj.isEdit=="1"){
							opHTML = "<span onclick=\"$(this).removeMem('"+key+"', '"+obj.name+"')\">×</span>";
						}
						html += "<li title=\"报名IP: "+obj.ip+"\">"+ opHTML+obj.name+"</li>";
					}
					html += "</ul><div class=\"clear20\"></div>";
					
					html += "<div class=\"signBlock\">"
					+"<span><strong>名字：</strong><input type=\"text\" id=\""+key+"_name\" class=\"name\" /></span>"
					+"<span id=\"sureBtn\" class=\"sureBtn\" onclick=\"addMember('"+key+"')\" onmousemove=\"$(this).addClass('on');\" onmouseout=\"$(this).removeClass('on')\">报名</span>"
					+"</div>";
					$("#act_list_div").append(html);
					startRest(key, act_info.endTime);
				}
	        }
	    });
	}
	$.fn.removeMem = function(key, name){
		var self = $(this);
		if(window.confirm("确定删除？")){
			DataHelper.signDown(key, name, function(result){
		        if (!result.isTrue) {
		            alert(result.message)
		        }
		        else {
					self.parent().remove();
		        }
		    });
		}
	}
	addMember = function(key){
		var name = $("#"+key+"_name").val().trim();
		if(name.isEmpty()){
			alert("名字不能为空！");
			return;
		}
		DataHelper.signUp(key, name, function(result){
	        if (!result.isTrue) {
	            alert(result.message)
	        }
	        else {
				$("#"+key+"_name").val("");
				var listContain = $("#"+key+"_member");
				listContain.append("<li title=\"报名IP: "+result.message+"\"><span onclick=\"$(this).removeMem('"+key+"', '"+name+"')\">×</span>"+name+"</li>");
				var oldOffset = listContain.find("li").last().offset();
				listContain.find("li").last().hide();
				var startOffset = $("#"+key+"_name").offset();
				DemoDom.css({"left": startOffset.left+"px", "top": startOffset.top+"px"}).html(name).show().animate({
					left: oldOffset.left+"px",
					top: oldOffset.top+"px"
				}, 500, function(){
					DemoDom.hide();
					listContain.find("li").last().show();
				});
	        }
	    });
	}
	
    convertTime = function(time){
        var times = time.split(".");
        var date = new Date(parseInt(times[0], 10), (parseInt(times[1], 10) - 1), parseInt(times[2], 10), parseInt(times[3], 0), parseInt(times[4], 0), 0);
        return times[0] + "-" + times[1] + "-" + times[2] + " " + times[3] + ":" + times[4] + ":00" + "(" + DayList[date.getDay()] + ")";
    }
	
	startRest = function(key, end){
		var times = end.split(".");
		var tarDate = new Date(parseInt(times[0], 10), (parseInt(times[1], 10)-1), parseInt(times[2], 10), parseInt(times[3], 0), parseInt(times[4], 0), 0);
		$("#"+key+"_rest").text(getLastTime(tarDate));
		window.setTimeout(function(){
			initMember();
		}, 60000);
	}
	
	getLastTime = function(tarDate){
		var date = new Date();
		var betweenTime = parseInt((tarDate.getTime()-date.getTime())/1000);
		if(betweenTime<0){
			return "报名已截止！";
		}
		var day = parseInt(betweenTime/(24*60*60));
		var hour = parseInt((betweenTime-day*24*60*60)/(60*60));
		var min = parseInt((betweenTime-day*24*60*60-hour*3600)/60);
//		var sec = betweenTime-day*24*60*60-hour*3600- min*60;
		return day+"天"+ hour +"小时" + min+"分";
	}
</script>
</head>
<body style="margin:auto; padding:20px">
	<div id="memDemo"></div>
	<h2>当前时间：<strong id="nowTime"></strong></h2>
	<div id="act_list_div" style="float:left; ">
	</div>
	<div style="clear:both; height:100px"></div>
	<!--
	<div class="block">
		<div class="actTitle">
			<strong style="font-size:20px">篮球活动</strong>
			<span style="margin-left:50px">开始时间：<strong>每周2</strong></span>
			<span style="margin-left:20px">倒计时：<strong>每周2</strong></span>
		</div>
		<div>篮球活动简单介绍\r\n篮球活动简单介绍</div>
		<div class="clear20"></div>
		<ul class="memberUl">
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
			<li title="报名IP: 10.10.20.146">asd</li>
		</ul>
		<div class="clear20"></div>
		<div class="signBlock">
			<span><strong>名字：</strong><input type="text" id="memName" class="name" /></span>
			<span id="sureBtn" class="sureBtn" onmousemove="$(this).addClass('on');" onmouseout="$(this).removeClass('on')">报名</span>
		</div>
	</div>-->
</body>
</html>


